<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jq.js"></script>
   <style>
       *{
           margin:0 ;
           padding: 0;
       }
       img{
           width: 226px;
           height: 226px;
           margin: 20px 13px;
       }
       li{
           width: 250px;
           height: 400px;
           list-style: none;
           float: left;
           margin-left: 50px;
           border: 1px solid #E4E4E4;
           margin-top: 20px;
       }
       h2{
           color: red;
           
       }
       span{
           display: inline-block;
           width: 30px;
           height: 10px;
           text-align: center;
       }
       button{
           width: 20px;
           height: 20px;
           
       }
       button.car{
           width: 100px;
           height: 30px;
           color: white;
           border-radius: 5px;
           background-color: red;
           border: none;
           float: right;
       }
       .li{
           box-shadow:5px 10px 10px #999 ;
           transition: all 0.5s;
          
       }
   </style>
</head>
<body>
   <ul >

   </ul>
</body>
<script src="./data.js"></script>
<script> 
console.log(data)
    $(function(){
// 便历元素方法二
        for(var i=0; i<data.length;i++){
            // 拼接法一 
           var lis= $('<li>'+
            '<div>'+
            "<img src=https:"+data[i].image+">"+'<br>'+
            data[i].name+'<br>'+
            '<h2>'+'￥'+data[i].price+'</h2>'+
            '</div>'+
            '<button class="jian">'+'-'+'</button>'+'<span>'+'1'+'</span>'+'<button class="jia">'+'+'+'</button>'+
            '<button class="car">'+'加入购物车'+'</button>'+'</li>');
            $('ul').append(lis);     
           //拼接法二 
        // var lis = '';
        // lis = `<li>
        //     <div>
        //     <img src=https:${data[i].image}><br>
        //     data[i].name<br>
        //     <h2>￥${data[i].price}</h2>
        //     </div>
        
        }
       
        $('li').mouseover(function(){
            $(this).attr('class','li');
            $(this).css('cursor','pointer');

        })
        $('li').mouseout(function(){
            $(this).attr('class','l');
        })
        $('div').click(function(e){
            e.stopPropagation();
            $(location).attr('href','./商品详情.html'+'?id='+data[1].id);
        })  
        $('.car').click(function(e){
            e.stopPropagation();
            $(location).attr('href','./购物车.html');
        })  
        $('.jia').click(function(){
            var num = parseInt($(this).siblings('span').text());
            num++;
            // console.log(num);
            $(this).siblings('span').text(num);
        })
        $('.jian').click(function(){
            var num = parseInt($(this).siblings('span').text());
            if(num > 0){
                num--;
            // console.log(num);
            $(this).siblings('span').text(num);
            }   
        })
    })
</script>
</html>